<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([130, 30], 'EPSG:4326'))
        })
        //设置这个点的样式
        feature.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
                color: '#ff0000',
                radius: 15,
                fill: new ol.style.Fill({
                    color: 'orange'
                }),
                stroke: new ol.style.Stroke({ color: 'red', width: 1 })
            })
        })
        )
        var pointLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature]
            })
        })
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                pointLayer
            ],
            view: new ol.View({
                center: [110, 30],
                projection: 'EPSG:4326',
                zoom: 5
            }),
            target: 'map'
        })



    </script>
</body>

</html>